<template>
  <div class="cascader-checked-box">
    <input type="checkbox" class="daas-check" :checked="value" />
    <span
      :class="
        `checked-box ${checked ? 'checked' : ''}
         ${indeterminate ? 'indeterminate' : ''}
         ${disabled ? 'disabled' : ''}`
      "
      @click.stop="handleClick"
    />
  </div>
</template>

<script>
export default {
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    indeterminate: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: false
    };
  },
  watch: {
    checked(val) {
      this.value = val;
    }
  },
  mounted() {
    this.value = this.checked;
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      this.value = !this.value;
      this.$emit("change", this.value);
    }
  }
};
</script>

<style lang="less" scoped>
.cascader-checked-box {
  display: flex;
  align-items: center;
  margin-right: 5px;
  position: relative;
  width: 15px;
  height: 15px;

  .daas-check {
    width: 15px;
    height: 15px;
    background-color: #fff;
  }

  .checked-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #d0d3d9;

    &:hover {
      border-color: #4f6ef2;
    }
  }

  .checked {
    border: 1px solid #4f6ef2;

    &::after {
      position: absolute;
      top: 3px;
      left: 1.5px;
      transform: rotate(-45deg);
      content: "";
      width: 9px;
      height: 5px;
      border: 2px solid #4f6ef2;
      border-top: none;
      border-right: none;
      z-index: 1;
    }
  }

  .indeterminate {
    border: 1px solid #4f6ef2;

    &::after {
      position: absolute;
      top: 25%;
      left: 25%;
      content: "";
      width: 50%;
      height: 50%;
      background-color: #4f6ef2;
      z-index: 1;
    }
  }

  .disabled {
    cursor: not-allowed;
    background-color: #f5f5f5;
    &:hover {
      border-color: #d0d3d9;
    }
  }
}
</style>
